import React, {PureComponent} from 'react';
import play from './img/play.svg'

const nodeStyle = {
  position: 'relative',
  zIndex: '1',
  boxSizing: 'border-box',
  border: '1px solid #d9d9d9',
  borderRadius: '4px',
  padding: '10px',
  background: '#fff',
  boxShadow: '0 0 5px #888888',
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
  cursor: 'pointer'
}

class Box extends PureComponent {
  constructor(props) {
    super(props);
  }

  render() {
    const {uuid, id, text, onChangeWaveId, collectorUuid}
      = this.props;
    return (
      <div style={nodeStyle}
           id={id}
           data-uuid={uuid}
           onClick={onChangeWaveId(uuid)}
      >
        {text}
        {
          collectorUuid === uuid && <img src={play} style={{
            position: 'absolute',
            width: '80px',
            opacity: '.2'
          }}/>
        }
      </div>
    )
  }
}

export default Box
